<!-- 二手交易 -->
<template>
	<view class="container pb-30">
		<Navbar title="报告查询" bgColor="#F2F3FF" leftIconColor="#404040" :titleStyle="{color: '#404040'}">
			<template #right>
				<navigator class="href">
					报告示例
					<Icon name="arrow-right" class="relative href_icon" color="#FFA625" size="28rpx" />
				</navigator>
			</template>
		</Navbar>

		<view class="box">
			<RuleForm class="mb-30" btnText="立即查询￥39.8" pageColor="#FFA625" />

			<view class="card relative p-30">
				<view class="card_title mb-30 d-flex">
					<image mode="widthFix" class="card_title_icon" src="/static/image/credit/card_left.png"></image>
					<text class="ml-30 mr-30">报告主要内容</text>
					<image mode="widthFix" class="card_title_icon" src="/static/image/credit/card_right.png"></image>
				</view>

				<view class="list d-flex">
					<view
						:class="['list_item d-flex', item.id % 2 !== 0 ? 'mr-30' : '', [9, 10].includes(item.id) ? '' : 'mb-30']"
						v-for="item of list" :key="item.id">
						<image mode="widthFix" class="list_item_icon mr-10"
							:src="`/static/image/credit/icon${item.id}.svg`" />
						<text class="list_item_title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue'
	import Icon from '@/components/Icon/index.vue'
	import Navbar from '@/components/Navbar/index.vue'
	import RuleForm from '@/query/components/ruleForm.vue'

	const list = reactive([{
			title: '基本信息',
			url: '',
			id: 1
		},
		{
			title: '银行贷款申请记录',
			url: '',
			id: 2
		},
		{
			title: '非银行贷款申请记录',
			url: '',
			id: 3
		},
		{
			title: '借贷记录',
			url: '',
			id: 4
		},
		{
			title: '失信行为',
			url: '',
			id: 5
		},
		{
			title: '信用异常行为',
			url: '',
			id: 6
		},
		{
			title: '法院案件',
			url: '',
			id: 7
		},
		{
			title: '执行案件',
			url: '',
			id: 8
		},
		{
			title: '限制高消费信息',
			url: '',
			id: 9
		}
	])
</script>

<style scoped lang="scss">
	@import '@/query/scss/index.scss';

	.container {
		background-color: #F2F3FF;

		.href {
			flex-direction: row;
			align-items: center;
			color: #FFA625;

			font: {
				size: 24rpx;
			}

			::v-deep {
				.navigator-wrap {
					display: flex;
				}
			}

			&_icon {
				top: 2rpx;
			}
		}

		.box {
			padding: 0 25rpx;
			overflow: visible;

			.ruleForm {
				padding: 30rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
				border-radius: 30rpx;
			}

			.card {
				&_title {
					flex-direction: row;
					align-items: center;
					justify-content: center;

					&_icon {
						width: 70rpx;
					}

					text {
						color: #404040;

						font: {
							size: 30rpx;
							weight: bold;
						}
					}
				}

				.list {
					padding: 25rpx 0;
					flex-wrap: wrap;

					&_item {
						padding: 28rpx 25rpx;
						width: calc(50% - 15rpx);
						align-items: center;
						border-radius: 12rpx;
						box-sizing: border-box;
						background: linear-gradient(to right, #F3F5FE, #FFF6F9);

						&_icon {
							width: 35rpx;
						}

						&_title {
							font: {
								size: 22rpx;
							}
						}
					}
				}
			}
		}
	}
</style>